<template>
    <div>
        <a href="#" class="category-selector-btn" @click.prevent="showCategorySelector = !showCategorySelector">All categories</a>

        <div class="category-selector" :class="{ hidden: !showCategorySelector }">
            <div class="category-selector-header">
                <a href="#" @click.prevent="showCategorySelector = false">Hide categories</a>
            </div>

            <div class="category-selector-body">
                <ul class="categories">
                    <li v-if="CraftEdition < CraftPro || licensedEdition < CraftPro">
                        <router-link to="/upgrade-craft">
                            <img src="" />
                            {{ "Upgrade Craft CMS"|t('app') }}
                        </router-link>
                    </li>
                    <li v-for="(category, key) in categories" :key="key">

                        <router-link :to="'/categories/'+category.id" @click.native="showCategorySelector = false">
                            <img :src="category.iconUrl" />
                            {{ category.title }}
                        </router-link>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'

    export default {
        data() {
            return {
                showCategorySelector: false,
            }
        },

        computed: {
            ...mapState({
                categories: state => state.pluginStore.categories,
                CraftEdition: state => state.craft.CraftEdition,
                CraftPro: state => state.craft.CraftPro,
                licensedEdition: state => state.craft.licensedEdition,
            }),
        },
    }
</script>

<style lang="scss" scoped>
    @import "../../../../../../../node_modules/craftcms-sass/mixins";
    @import "../../sass/variables";


    /* Category Selector Btn */

    .category-selector-btn {
        @apply .hidden .relative;
        background: $grey050;
        border: 1px solid $hairlineColor;
        padding: 10px 20px;
        border-radius: 4px;
        color: $secondaryColor;

        &:before {
            @include icon;
            @apply .absolute .pin-r;
            top: calc(50% - 10px);
            font-size: 16px;
            width: 43px;
            line-height: 20px;
            content: 'downangle';
        }

        &:hover {
            @apply .no-underline;
        }
    }


    /* Category Selector */

    .category-selector {
        @apply .hidden .flex-col .fixed .pin-t .pin-l .bg-white .z-20;
        width: 100vw;
        height: 100vh;
        box-sizing: border-box;

        .category-selector-header {
            a {
                @apply .block .text-black;
                padding: 14px 24px;
                background: #fafafa;
                border-bottom: 1px solid #eee;

                &:hover {
                    @apply .no-underline;
                }
            }
        }

        .category-selector-body {
            @apply .overflow-auto .h-full;
            box-sizing: border-box;

            ul.categories {
                li {
                    &:first-child a {
                        border-top: 0;
                    }

                    &:first-child:before {
                        @apply .hidden;
                    }

                    &:before,
                    &:after {
                        left: 1rem;
                        right: 1rem;
                    }

                    a {
                        padding-left: 55px;

                        img {
                            left: 24px;
                        }
                    }
                }
            }
        }
    }

    @media only screen and (max-width: 974px) {
        .category-selector-btn {
            @apply .block;
        }

        .category-selector {
            @apply .flex;
        }
    }
</style>
